<template>
  <div
    v-if="getMenuFixed && !getIsMobile"
    :style="getHiddenDomStyle"
    v-show="showClassSideBarRef"
  ></div>
  <Sider
    v-show="showClassSideBarRef"
    ref="sideRef"
    breakpoint="lg"
    collapsible
    :class="getSiderClass"
    :width="getMenuWidth"
    :collapsed="getCollapsed"
    :collapsedWidth="getCollapsedWidth"
    :theme="getMenuTheme"
    @breakpoint="onBreakpointChange"
    :trigger="getTrigger"
    v-bind="getTriggerAttr"
  >
    <template #trigger v-if="getShowTrigger">
      <LayoutTrigger />
    </template>
    <div class="flex flex-col h-full text-black font-bold"  style="border-right: 1px solid #f2f2f2;color:#222;font-family: 微软雅黑;">
      <div class="flex flex-col flex-1 flex-grow"  >
        <LayoutMenu  :menuMode="getMode" :splitType="getSplitType" />
      </div>
      <div class="flex flex-col justify-end mt-2 mb-4 ">
         <div class="flex flex-col items-center  mb-4 cursor-pointer" @click="gopage(1)">
            <Badge
            :count="cartList.length"
            :overflowCount="99"
            :number-style="{ backgroundColor: '#dc2626' }">
              <!-- <Icon icon="ant-design:shopping-cart-outlined" size="18"/> -->
               <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" 
                fill="none" version="1.1" width="16" height="16" viewBox="0 0 20.89972496032715 21.243000030517578"><g><path d="M3.243,4.657L0,1.415L1.415,0L4.657,3.243L19.899,3.243C20.5687,3.24295,21.0492,3.88844,20.857,4.53L18.457,12.53C18.3303,12.9532,17.9408,13.243,17.499,13.243L5.243,13.243L5.243,15.243L16.243,15.243L16.243,17.243L4.243,17.243C3.69072,17.243,3.243,16.7953,3.243,16.243L3.243,4.657ZM4.743,21.243C3.91457,21.243,3.243,20.5714,3.243,19.743C3.243,18.9146,3.91457,18.243,4.743,18.243C5.57143,18.243,6.243,18.9146,6.243,19.743C6.243,20.5714,5.57143,21.243,4.743,21.243ZM16.743,21.243C15.9146,21.243,15.243,20.5714,15.243,19.743C15.243,18.9146,15.9146,18.243,16.743,18.243C17.5714,18.243,18.243,18.9146,18.243,19.743C18.243,20.5714,17.5714,21.243,16.743,21.243Z" fill="#212123" fill-opacity="1"/></g></svg>
            </Badge>
            <span class="text-xs mt-1">购物车</span>
         </div>
         <div class="flex flex-col items-center  mb-4 cursor-pointer" @click="gopage(4)">
              <Icon icon="ant-design:robot-outlined" size="18"/>
            <span class="text-xs mt-1">智能体</span>
         </div>
          
         <div class="flex flex-col items-center mb-4 cursor-pointer" @click="gopage(2)">
           <Avatar :src="getUserInfo.avatarUrl" :size="24" v-if="getUserInfo&&getUserInfo.avatarUrl"/>
           <Avatar src="../assets/icons/deecp-logo.svg" :size="24" v-else/>
            <span class="text-xs mt-1">个人中心</span>
         </div>
         <div class="flex flex-col items-center cursor-pointer text-red" title="点击退出" @click="gopage(3)">
           <Icon icon="ant-design:logout-outlined" size="16"/> 
           <span class="text-xs mt-1">退出</span>
         </div>
      </div>
    </div>
    <DragBar ref="dragBarRef" />
  </Sider>
</template>
<script lang="ts">
  import { computed, defineComponent, ref, unref, CSSProperties, h ,onMounted} from 'vue';
import { Icon } from '/@/components/Icon';

  import { Layout,Tooltip, Badge ,Avatar} from 'ant-design-vue';


  import LayoutMenu from '../menu/index.vue';
  import LayoutTrigger from '/@/layouts/default/trigger/index.vue';
  import { useUserStore } from '/@/store/modules/user';
  import { MenuModeEnum, MenuSplitTyeEnum } from '/@/enums/menuEnum';

  import { useMenuSetting } from '/@/hooks/setting/useMenuSetting';
  import { useTrigger, useDragLine, useSiderEvent } from './useLayoutSider';
  import { useAppInject } from '/@/hooks/web/useAppInject';
  import { useDesign } from '/@/hooks/web/useDesign';

  import DragBar from './DragBar.vue';
  import { useRouter } from 'vue-router';

  
  export default defineComponent({
    name: 'LayoutSideBar',
    components: { Sider: Layout.Sider, LayoutMenu, DragBar, LayoutTrigger ,Icon,Badge,Avatar},
    setup() {
      const dragBarRef = ref<ElRef>(null);
      const sideRef = ref<ElRef>(null);

      const userStore = useUserStore();
       
       
      userStore.setCartList();
      const cartList=computed(() => {
        
        return userStore.getCartList;
      });
      const getUserInfo = computed(() => {
        const { userName = '', avatarUrl, remarks } = userStore.getUserInfo || {};
        return { userName, avatarUrl, remarks };
      });
    
var a= userStore.getUserInfo||{};

      const {
        getHeaderTheme,
        getCollapsed,
        getMenuWidth,
        getSplit,
        getMenuTheme,
        getRealWidth,
        getMenuHidden,
        getMenuFixed,
        getIsMixMode,
        toggleCollapsed,
      } = useMenuSetting();

      const { push } = useRouter();

      const { prefixCls } = useDesign('layout-sideBar');

      const { getIsMobile } = useAppInject();

      const { getTriggerAttr, getShowTrigger } = useTrigger(getIsMobile);

      useDragLine(sideRef, dragBarRef);

      const { getCollapsedWidth, onBreakpointChange } = useSiderEvent();

      const getMode = computed(() => {
        return unref(getSplit) ? MenuModeEnum.INLINE : null;
      });

      const getSplitType = computed(() => {
        return unref(getSplit) ? MenuSplitTyeEnum.LEFT : MenuSplitTyeEnum.NONE;
      });

      const showClassSideBarRef = computed(() => {
        return unref(getSplit) ? !unref(getMenuHidden) : true;
      });

      const getSiderClass = computed(() => {
        return [
          prefixCls,
          {
            [`${prefixCls}--fixed`]: unref(getMenuFixed),
            [`${prefixCls}--mix`]: unref(getIsMixMode) && !unref(getIsMobile),
          },
        ];
      });

      const getHiddenDomStyle = computed((): CSSProperties => {
        const width = `${unref(getRealWidth)}px`;
        return {
          width: width,
          overflow: 'hidden',
          flex: `0 0 ${width}`,
          maxWidth: width,
          minWidth: width,
          transition: 'all 0.2s',
        };
      });

      function gopage(type){
        if(type==1){
          push('/desktop/usercart')
        }else if(type==2){
           push('/desktop/dpperson')
        }else if(type==3){
          userStore.confirmLoginOut();
        }else{
           push('/desktop/aichat')
        }
      };
    
      // 在此处使用计算量可能会导致sider异常
      // andv 更新后，如果trigger插槽可用，则此处代码可废弃
      const getTrigger = h(LayoutTrigger);

      

      

      return {
     
        cartList,
        getUserInfo,
        gopage,
        prefixCls,
        sideRef,
        dragBarRef,
        getIsMobile,
        getHiddenDomStyle,
        getSiderClass,
        getTrigger,
        getTriggerAttr,
        getCollapsedWidth,
        getMenuFixed,
        showClassSideBarRef,
        getMenuWidth,
        getCollapsed,
        getMenuTheme,
        onBreakpointChange,
        getMode,
        getSplitType,
        getShowTrigger,
        toggleCollapsed,
      };
    },
  });
</script>
<style lang="less">
  @prefix-cls: ~'jeesite-layout-sideBar';

  .@{prefix-cls} {
    z-index: @layout-sider-fixed-z-index;

    &--fixed {
      position: fixed;
      top: 0;
      left: 0;
      height: 100%;
    }

    &--mix {
      top: @header-height;
      height: calc(100% - @header-height);
    }

     &.ant-layout-sider-light {
        background-color: @sider-dark-lighten-bg-color;
     }

    &.ant-layout-sider-dark {
      background-color: @sider-dark-bg-color;

      .ant-layout-sider-trigger {
        color: darken(@white, 25%);
        background-color: @trigger-dark-bg-color;

        &:hover {
          color: @white;
          background-color: @trigger-dark-hover-bg-color;
        }
      }
    }

    &:not(.ant-layout-sider-dark) {
      // box-shadow: 2px 0 8px 0 rgba(29, 35, 41, 0.05);

      .ant-layout-sider-trigger {
        color: @text-color-base;
        border-top: 1px solid @header-light-bottom-border-color;
      }
    }

    .ant-layout-sider-zero-width-trigger {
      top: 40%;
      z-index: 10;
    }

    & .ant-layout-sider-trigger {
      height: 36px;
      line-height: 36px;
    }
  }
</style>
